為什麼選擇建立 header component 呢？

1. 網站各個頁面都會共用
2. 固定版型而且不需要傳入動態的資料，不會有傳接資料報錯的問題

開始建立第一個元件

首先，在 components 目錄下建立 TaiHeader.vue，元件由 template / script / style 組成，根據命名規則通常會取兩個字節作為名字，否則 header 後續會命名衝突。
TaiHeader.vue *

<template>
   <div>
       <img src="../assets/Logo-desktop.png">
       <ul>
           <li><a href="">景點</a></li>
           <li><a href="">活動</a></li>
           <li><a href="">美食</a></li>
       </ul>
   </div>
</template>

<script>
   export default {
       name: "TaiHeader" // 輸出元件，到時候可以在 view 畫面引入
   }
</script>

<style scoped>
   div.w-100 {
       height: 80px;
       border-bottom: 1px solid #E5E5E5;
   }
   ul li{
       font-size: 18px;
       font-weight: 400;
       line-height:  80px;
   }
</style>

template 下的第一層只能有一個物件，如下圖img&ul並排會出現錯誤訊息

 <template>
     <img src="../assets/Logo-desktop.png">
     <ul>
         <li><a href="">景點</a></li>
         <li><a href="">活動</a></li>
         <li><a href="">美食</a></li>
     </ul>
 </template>

沒有用到 SCSS 語法時，style 註記 lang="SCSS"也會出現錯誤

<style scoped lang="SCSS">
   div.w-100 {
       height: 80px;
       border-bottom: 1px solid #E5E5E5;
   }
   ul li{
       font-size: 18px;
       font-weight: 400;
       line-height:  80px;
   }
</style>

建立第一個 header 元件後，下篇再試著將元件放到 APP.vue 裡！

參考來源：
https://www.jianshu.com/p/d5eec7c90b43
https://book.vue.tw/CH2/2-1-components.html